<template>
  <div v-if="permissionsLists(108)">
    <page-header :title="$t('m.Order_Exception_Feedback')" :has-return="false">
    </page-header>
    <div class="container">
      <div class="list_div">
        <div class="page_list_div">
          <el-form class="page_list_top" label-position="right">
            <el-form-item :label="$t('m.search_') + ':'" class="page_list_top">
              <el-input
                :placeholder="
                  [$t('m.Order_List_OrderID'), $t('m.User_ID')].join(' / ')
                "
                prefix-icon="el-icon-search"
                style="width:260px;"
                clearable
                v-model="params.search"
              />
            </el-form-item>
            <el-form-item
              :label="$t('m.branch_Creationdate') + ':'"
              class="page_list_top"
            >
              <el-date-picker
                style="width:246px;"
                v-model="params.rangeTime"
                :picker-options="datePickerOptions"
                :default-value="timeDefaultShow"
                type="daterange"
                :default-time="['00:00:00', '23:59:59']"
                value-format="timestamp"
                range-separator="~"
                :start-placeholder="$t('m.start_date')"
                :end-placeholder="$t('m.end_date')"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              :label="$t('m.Exception_type') + ':'"
              class="page_list_top"
            >
              <el-select
                v-model="params.orderType"
                :placeholder="$t('m.pleaseChoose')"
                ref="select1"
                @change="searchClick('', 1)"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('m.status') + ':'" class="page_list_top">
              <el-select
                v-model="params.state"
                :placeholder="$t('m.pleaseChoose')"
                ref="select2"
                @change="searchClick('', 2)"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="page_list_top page_list_search">
              <el-button
                class="search_button reset_button"
                @click="searchClick('')"
                >{{ $t('m.search_') }}</el-button
              >
            </el-form-item>
            <el-form-item class="page_list_top">
              <el-button class="reset_button" @click="searchClick('1')">{{
                $t('m.refresh')
              }}</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-divider class="el_divider"></el-divider>
        <div class="el_table_div">
          <el-table :data="page.records">
            <el-table-column
              fixed
              prop="orderNo"
              :label="$t('m.Order_List_OrderID')"
              min-width="150"
            >
            </el-table-column>
            <el-table-column
              prop="ucode"
              :label="$t('m.User_ID')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.ucode | strFormat }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="cabinetNo"
              :label="$t('m.Station_SN')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.cabinetNo | strFormat }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="pbNo"
              :label="$t('m.Order_List_Powerbank')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.pbNo | strFormat }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="orderType"
              :label="$t('m.Exception_type')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.orderType | stateFormat(options1) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="description"
              :label="$t('m.Feedback_content')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.description | strFormat }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="images"
              :label="$t('m.Feedback_image')"
              min-width="120"
            >
              <template slot-scope="scope">
                <el-image
                  style="width: 67px; height: 50px;border-radius:4px;"
                  :src="fileUrlFormat(scope.row.images[0])"
                  :preview-src-list="
                    scope.row.images.map(item => fileUrlFormat(item))
                  "
                >
                </el-image>
              </template>
            </el-table-column>
            <el-table-column
              prop="state"
              :label="$t('m.Processing_status')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.state | stateFormat(options2) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="processState"
              :label="$t('m.Processing_results')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{
                    scope.row.processState | stateFormat(options3) | strFormat
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="auditName"
              :label="$t('m.Action_by')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.auditName | strFormat }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="auditRemark"
              :label="$t('m.Order_Details_Remarks')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.auditRemark | strFormat }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              :label="$t('m.branch_Creationdate')"
              min-width="120"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.createTime | dateformat }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              :label="$t('m.Users_Details_Operation')"
              min-width="104"
            >
              <template slot-scope="scope">
                <el-dropdown placement="bottom">
                  <img
                    src="@/assets/imgs/ic_operation.svg"
                    alt=""
                    class="dropdown_img"
                  />
                  <el-dropdown-menu
                    slot="dropdown"
                    style="white-space: nowrap !important;"
                  >
                    <el-dropdown-item @click.native="messageBtn(scope.row)">{{
                      $t('m.View_msg')
                    }}</el-dropdown-item>
                    <el-dropdown-item
                      @click.native="responseBtn(scope.row.orderNo)"
                      v-if="scope.row.state == 0 && permissionsLists(214)"
                      >{{ $t('m.Handle') }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
            <emptydata
              slot="empty"
              v-if="!page.records || page.records.length == 0"
            />
          </el-table>
          <el-pagination
            background
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="page.size"
            :current-page.sync="page.current"
            layout="total, sizes, prev, pager, next, jumper"
            :pager-count="5"
            :total="page.total"
            class="el_pagination"
            @size-change="changePageSize"
            @current-change="changePageNum"
            v-show="page.total > 0"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 查看信息 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="msgDialog"
      :title="$t('m.View_msg')"
      width="720px"
      top="200px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1">
          {{ $t('m.Bank_information') }}
        </div>
        <div class="dialog_content">
          <div class="el_table_div" style="padding:0;">
            <el-table :data="[deviceList.powerBank]" key="1">
              <el-table-column
                fixed
                prop="pbNo"
                :label="$t('m.Order_List_Powerbank')"
                min-width="80"
              >
              </el-table-column>
              <el-table-column
                prop="state"
                :label="$t('m.status')"
                min-width="80"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.state | stateFormat(options6) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="cabinetNo"
                :label="$t('m.Station_SN')"
                min-width="80"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.cabinetNo | strFormat }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="updateTime"
                :label="$t('m.Synchronization_time')"
                min-width="80"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.updateTime | dateformat }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                :label="$t('m.Users_Details_Operation')"
                min-width="80"
              >
                <el-button type="text" @click="refreshClick">{{
                  $t('m.Refresh')
                }}</el-button>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="dialog_content1" style="padding-top:20px;">
          {{ $t('m.Station_Stationinformation') }}
        </div>
        <div class="dialog_content">
          <div class="el_table_div" style="padding:0;">
            <el-table :data="[deviceList.cabinet]" key="2">
              <el-table-column
                fixed
                prop="cabinetNo"
                :label="$t('m.Station_SN')"
                min-width="80"
              >
              </el-table-column>
              <el-table-column
                prop="state"
                :label="$t('m.status')"
                min-width="80"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.state | stateFormat(options5) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="existPb"
                :label="$t('m.Power_bank_in_cabinet')"
                min-width="80"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.existPb | stateFormat(options4) | strFormat }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="updateTime"
                :label="$t('m.Synchronization_time')"
                min-width="80"
              >
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.updateTime | dateformat }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                :label="$t('m.Users_Details_Operation')"
                min-width="80"
              >
                <el-button type="text" @click="refreshClick">{{
                  $t('m.Refresh')
                }}</el-button>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="msgDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="msgDialog = false" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>

    <!-- 订单异常反馈处理 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="responseDialog"
      :title="$t('m.Exception_feedback_handling')"
      width="520px"
      top="200px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1">
          {{ $t('m.Exception_type') }}: <span class="dialog_content2">{{
            deviceList.orderType | stateFormat(options1)
          }}</span>
        </div>
        <div class="dialog_content1">
          {{ $t('m.Feedback_content') }}: <span class="dialog_content2">{{
            deviceList.description
          }}</span>
        </div>
        <div
          class="dialog_content1"
          style="display:flex"
          v-if="deviceList.images"
        >
          {{ $t('m.Feedback_image') }}: 
          <el-image
            v-for="(item, index) in deviceList.images.split(',')"
            :key="index"
            style="width: 85px; height: 85px;margin-right:20px;border-radius:4px;"
            :src="fileUrlFormat(item)"
            :preview-src-list="[fileUrlFormat(item)]"
          >
          </el-image>
        </div>
        <div class="dialog_content1">
          {{ $t('m.Processing_results') }}*: 
          <el-radio v-model="auditParams.state" :label="1">{{
            $t('m.Order_Power_bank_found')
          }}</el-radio>
          <el-radio v-model="auditParams.state" :label="2">{{
            $t('m.Order_Power_bank_lost')
          }}</el-radio>
        </div>
        <div class="dialog_content1">
          {{ $t('m.Order_Details_Remarks') }}*: 
        </div>
        <div class="dialog_content3">
          <el-input
            v-model="auditParams.remark"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 4 }"
            clearable
            maxlength="200"
            show-word-limit
            :placeholder="$t('m.Please_enter')"
            style="width:100%"
          >
          </el-input>
        </div>
        <div class="dialog_content1">
          {{ $t('m.Exception_note') }}: <span class="dialog_content2">{{
            $t('m.Exception_note_text')
          }}</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="responseDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="auditClick" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import page from '@/mixins/page'
import { EventBus } from '@/common/util'
export default {
  mixins: [page],
  data () {
    return {
      datePickerOptions: {
        disabledDate (time) {
          let current_time = new Date().Format('yyyy-MM-dd') + ' 23:59:59' //时间日期为: ‘当前日期 23:59:59’
          let t = new Date(current_time).getTime() //‘当前日期 23:59:59’的时间戳
          return time.getTime() > t
        }
      },
      params: {
        search: '', //模糊查询
        rangeTime: '', //时间戳范围
        state: '', //状态: 0-待处理 1-已处理
        orderType: '' //异常类型: 1-租借失败 2-订单不结束
      },
      options1: [
        {
          value: '',
          label: this.$t('m.all')
        },
        {
          value: 1,
          label: this.$t('m.Power_bank_did_not_eject')
        },
        {
          value: 2,
          label: this.$t('m.Power_Bank_has_been_returned')
        }
      ],
      options2: [
        {
          value: '',
          label: this.$t('m.all')
        },
        {
          value: 0,
          label: this.$t('m.Pending_processing')
        },
        {
          value: 1,
          label: this.$t('m.Processed')
        }
      ],
      options3: [
        {
          value: 1,
          label: this.$t('m.Order_Power_bank_found')
        },
        {
          value: 2,
          label: this.$t('m.Order_Power_bank_lost')
        }
      ],
      options4: [
        {
          value: false,
          label: this.$t('m.Station_List_Distribution_No')
        },
        {
          value: true,
          label: this.$t('m.Station_List_Distribution_Yes')
        }
      ],
      options5: [
        {
          value: '',
          label: this.$t('m.all')
        },
        {
          value: 3,
          label: this.$t('m.agency_activated')
        },
        {
          value: 1,
          label: this.$t('m.Station_Status_On')
        },
        {
          value: 0,
          label: this.$t('m.Station_Status_Off')
        }
        // {
        //   value: 2,
        //   label: '已迁移'
        // }
      ],
      options6: [
        {
          value: '',
          label: this.$t('m.all')
        },
        {
          value: 0,
          label: this.$t('m.Station_untapped')
        },
        {
          value: 1,
          label: this.$t('m.Order_Status_Renting')
        },
        {
          value: 2,
          label: this.$t('m.Station_Damaged')
        },
        // {
        //   value: 3,
        //   label: '已报失'
        // },
        {
          value: 4,
          label: this.$t('m.Station_eject2')
        },
        {
          value: 5,
          label: this.$t('m.Station_Sold')
        },
        {
          value: 6,
          label: this.$t('m.Inventory')
        }
      ],
      deviceList: '', //检查充电宝
      orderRow: '', //选中订单
      msgDialog: false, //信息弹窗
      responseDialog: false, //处理弹窗
      auditParams: {
        id: '',
        state: '',
        remark: ''
      },
      permissionsIds: []
    }
  },

  created () {
    this.$store.state.permissions.forEach(item => {
      this.permissionsIds.push(Number(this.$jsencrypt.decrypt(item)))
    })
    if (!this.permissionsLists(108)) {
      return
    }
    this.getReportsLists()
    this.timeDefaultShow = new Date()
    this.timeDefaultShow.setMonth(new Date().getMonth() - 1)
  },
  mounted () {},
  methods: {
    //权限id校验
    permissionsLists (val) {
      return this.permissionsIds.includes(val)
    },
    //获取异常订单列表
    getReportsLists () {
      this.$api.order.getReportsList(this.params, this.page).then(res => {
        if (this.$ok(res)) {
          this.page = res.data
          this.page.records.map(item => {
            item.images = item.images.split(',')
          })
        }
      })
    },
    // 搜索/重置
    searchClick (reset, e) {
      // 是否重置
      let size = this.page.size
      this.page = this.$options.data.call(this).page
      if (reset) {
        this.params = this.$options.data.call(this).params
        this.timeDefaultShow = new Date()
        this.timeDefaultShow.setMonth(new Date().getMonth() - 1)
      } else {
        this.page.size = size
      }
      this.$nextTick(() => {
        e ? this.$refs[`select${e}`].blur() : ''
      })
      this.getReportsLists()
    },
    // 每页数
    changePageSize (val) {
      this.page.current = 1
      this.page.size = val
      this.getReportsLists()
    },
    // 当前页
    changePageNum (val) {
      this.page.current = val
      this.getReportsLists()
    },
    //检查充电宝
    checkDevice () {
      let params = {
        cabinetNo: this.orderRow.cabinetNo,
        pbNo: this.orderRow.pbNo
      }
      this.$api.order.checkDevice(params).then(res => {
        if (this.$ok(res)) {
          this.deviceList = res.data
          this.msgDialog = true
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //查看充电宝
    messageBtn (item) {
      this.deviceList = ''
      this.orderRow = item
      this.checkDevice()
    },
    //刷新
    refreshClick () {
      this.deviceList = ''
      this.checkDevice()
    },
    //获取订单问题详情
    getReportsDetail (item) {
      this.$api.order.getReportsDetail(item).then(res => {
        if (this.$ok(res)) {
          this.deviceList = res.data
          this.auditParams.id = res.data.id
          this.responseDialog = true
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //处理
    responseBtn (orderNo) {
      this.deviceList = ''
      this.auditParams = this.$options.data.call(this).auditParams
      this.getReportsDetail(orderNo)
    },
    auditClick () {
      if (!this.auditParams.state) {
        this.$message(this.$t('m.Please_select_Processing_results'))
        return
      }
      if (!this.auditParams.remark) {
        this.$message(this.$t('m.Enter_remarks'))
        return
      }
      this.$openLoading()
      this.$api.order.auditOrder(this.auditParams).then(res => {
        if (this.$ok(res)) {
          this.$message.success(res.message)
          this.responseDialog = false
          this.triggerBPageMethod()
          this.getReportsLists()
          this.$closeLoading()
        } else {
          this.$closeLoading()
          this.$message.error(res.message)
        }
      })
    },
    triggerBPageMethod () {
      EventBus.$emit('trigger-method')
    }
  }
}
</script>
